<template>
  <a-layout-content style="padding: 0 50px">
    <a-breadcrumb style="margin: 16px 0">
    </a-breadcrumb>
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            mode="inline"
            style="height: 100%"
            @click="handlerSelected"
        >
          <a-menu-item key="welcome">
              <user-outlined />
               欢迎页
          </a-menu-item>
          <a-sub-menu v-for="(item, index) in categorys" :key="'sub'+index">
            <template #title>
                <span>
                  <user-outlined />
                   {{ item.name }}
                </span>
            </template>
            <!-- 子菜单 -->
            <a-menu-item v-for="(children, childrenIndex) in item.children" :key="children.id">
              {{ children.name }}
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content v-if="showWelcome" :style="{ padding: '0 24px', minHeight: '280px' }">
         <welcome></welcome>
      </a-layout-content>
      <a-layout-content v-if="!showWelcome" :style="{ padding: '0 24px', minHeight: '280px' }">
        <!--    内容    -->
        <a-config-provider :locale="zhCN">
        <a-list item-layout="vertical" size="large" v-if="books.length > 0"
         :data-source="books" :grid="{gutter: 16, column: 3}">
          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <template #actions>
                <span key="EyeOutlined">
                  <component is="EyeOutlined" style="margin-right: 8px" />
                  {{ item.viewCount }}
                </span>
                <span key="LikeOutlined">
                  <component is="LikeOutlined" style="margin-right: 8px" />
                  {{ item.voteCount }}
                </span>
                <span key="SnippetsOutlined">
                  <component is="SnippetsOutlined" style="margin-right: 8px" />
                  {{ item.docCount }}
                </span>
              </template>
              <a-list-item-meta :description="item.description">
                <template #title>
                  <router-link :to="'/ebook/' + item.id">{{ item.name }}</router-link>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>
              {{ item.content }}
            </a-list-item>
          </template>
        </a-list>
        </a-config-provider>
<!--        <a-empty v-if="books.length == 0"/>-->
        <a-config-provider :locale="zhCN">
          <a-pagination
              v-model:current="pagination.current"
              v-model:pageSize="pagination.pageSize"
              :pageSizeOptions="pagination.pageSizeOptions"
              :total="pagination.total"
              show-size-changer
              :hideOnSinglePage="true"
              :showLessItems="true"
              @change="onPageChange"
          />
        </a-config-provider>
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script>
import {ref} from "vue";
import { SnippetsOutlined, LikeOutlined, EyeOutlined,LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import welcome from "../components/welcome.vue";

export default {
  name: "home",
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    SnippetsOutlined,
    LikeOutlined,
    EyeOutlined,
    welcome
  },
  setup(){
    // ref 表示定义一个响应式变量
    let books = ref([]);

    let pagination = ref({
          current: 1,
          pageSize: 2,
          pageSizeOptions: ['1', '2', '5', '10', '20']
    });

    const get = () => {
      const params = {
        current: pagination.value.current,
        pageSize: pagination.value.pageSize,
        category2Id: selectedKeys2.value[0]
      };
      axios.get("/ebook/list", {params}).then( (res) => {
         let data = res.data;
         if (data.code == 200){
           books.value = data.data.list;
           pagination.value.total = parseInt(data.data.total);
         }
      });
    }
    const onPageChange = (page, pageSize) => {
      get();
    }


    // 获取分类数据
    // 分类的多级选择
    const category = ref();
    const selectedKeys2= ref(['welcome']);

    const categorys = ref([]);

    // 获取 tree 格式的分类数据
    const getCategorys = () => {
      axios.get("/category/all").then( (res) => {
        let data = res.data;
        if (data.code == 200){
          categorys.value = data.data;
          // selectedKeys2.value = [categorys.value[0].children[0].id];
          // get(); // 获取电子书
        }
      });
    }
    const showWelcome = ref(true);

    const handlerSelected = (r) => {
      if (r.key == 'welcome'){
        showWelcome.value = true;
      } else {
        showWelcome.value = false;
      }

      selectedKeys2.value = [r.key];
      get();
    }



    return {
      selectedKeys2,
      openKeys: ref([]),
      get,
      books,
      pagination,
      onPageChange,
      zhCN,
      categorys,
      getCategorys,
      handlerSelected,
      showWelcome
    }
  },
  mounted() {
    // 分类数据
    this.getCategorys()
  }
}
</script>

<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 20%;
}
</style>